<template>
  <div>
    <el-form :inline="true" :model="state.pages" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="state.pages.roleName" placeholder="请输入用户名" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="tab-btns">
      <el-button type="primary" icon="Plus" @click="addRole">新增</el-button>
    </div>

    <el-table
      :header-cell-style="{ background: exCss.primaryColor, color: '#fff' }"
      :data="state.tableData"
      style="width: 100%"
    >
      <el-table-column prop="roleName" label="角色名称" />
      <el-table-column prop="roleKey" label="权限字符" />
      <el-table-column prop="roleSort" label="显示顺序" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === '1'" class="ml-2" type="danger">
            停用
          </el-tag>
          <el-tag v-if="scope.row.status === '0'" class="ml-2" type="success">
            正常
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <div v-if="scope.row.roleKey !== 'admin'">
            <el-button
              text
              type="primary"
              icon="Edit"
              style="width: 50px"
              @click="updateRowRole(scope.row)"
            >
              修改
            </el-button>
            <el-button
              text
              type="primary"
              icon="Delete"
              style="width: 50px"
              @click="removeRole(scope.row)"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-block">
      <el-pagination
        v-model:currentPage="state.pages.pageNum"
        v-model:page-size="state.pages.pageSize"
        background
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.pages.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <role-dialog
      ref="roleEl"
      :dialog-visible="state.isShow"
      :title="state.isAdd ? '新增角色' : '编辑角色'"
      :is-add="state.isAdd"
      @close="close"
    />
  </div>
</template>

<script setup>
import exCss from '@/style/module/primary.module.scss'
import { nextTick, onMounted, reactive, ref } from 'vue'
import {
  delRole,
  getRole,
  listRoleFun,
  roleMenuTreeselect,
} from '@/api/role/role'
import RoleDialog from '@/view/system/component/RoleDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const roleEl = ref()
const state = reactive({
  pages: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    roleName: '',
  },
  isAdd: false,
  isShow: false,
  diaLogTitle: '新增角色',
  tableData: [],
})

onMounted(() => {
  onSubmit()
})
// 每页数
const handleSizeChange = (e) => {
  state.pages.pageSize = e
  getData()
}
// 页码
const handleCurrentChange = (e) => {
  state.pages.pageNum = e
  getData()
}
// 查询
const onSubmit = () => {
  state.pages.pageNum = 1
  getData()
}
// 重置
const onReset = () => {
  state.pages.roleName = ''
  onSubmit()
}
// 公用的查询方法
const getData = () => {
  listRoleFun(state.pages).then((res) => {
    state.tableData = res.rows
  })
}
// 关闭弹框
const close = (type) => {
  if (type) {
    onSubmit()
  }
  state.isShow = false
}
// 新增
const addRole = () => {
  state.isAdd = true
  state.isShow = true
  nextTick(() => {
    roleEl.value.setFormData(null)
  })
}
// 修改
const updateRowRole = async (row) => {
  state.isAdd = false
  // 获取当前选中的角色id
  const roleId = row.roleId
  // 根据角色id获取可以看到的菜单
  const roleMenu = await getMenuByRoleId(roleId)
  // 根据角色id获取角色信息
  const roleInfo = await getRoleInfoById(roleId)
  state.isShow = true
  nextTick(() => {
    roleEl.value.setFormData(roleInfo.data, roleMenu.checkedKeys)
  })
}
// 根据角色id获取可以看到的菜单
const getMenuByRoleId = async (id) => {
  return await roleMenuTreeselect(id)
}
// 查询角色详细
const getRoleInfoById = async (id) => {
  return await getRole(id)
}
// 删除
const removeRole = (row) => {
  ElMessageBox.confirm('确认删除该角色吗', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    delRole(row.roleId).then((res) => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      onSubmit()
    })
  })
}
</script>

<style scoped lang="scss">
.pagination-block {
  margin-top: 10px;
  float: right;
}

.tab-btns {
  margin-bottom: 10px;
}
</style>
